//这个是获取文章列表的js,
//首先发送请求,获取后台信息,渲染页面
let form = layui.form; //后面要用到

let data = {
  pagenum: 2, //数字是几就会获取第几页的内容,有点不方便,可以把这个数据拿出去,设一个全局变量.
  pagesize: 2, // 每页显示多少条
};

function renderarticle() {
  $.ajax({
    url: "/my/article/list",
    data: data,
    success: function (res) {
      //获取文章列表成功
      //可以打印res看一下他的内容
      console.log(res); //{status: 0, message: "获取文章列表成功！", data: Array(2), total: 5}  其中data是一个数组套对象,使我们要找的内容
      let htmlstr = template("tpl-list", res);
      $("tbody").html(htmlstr);
      //还可以找到后台返回的全部数据的总数,这个要保留下来,后面要用到
      showPage(res.total); //在这里调用函数,传参,这里有t的值
    },
  });
}
renderarticle();

//做一个分页器
let laypage = layui.laypage;
function showPage(t) {
  //执行一个laypage实例
  laypage.render({
    elem: "page", //注意，这里的 test1 是 ID，不用加 # 号
    count: t, //数据总数，从服务端得到,这里默认写的是50条,
    limit: data.pagesize, //每页显示多少条,自己设置,随意,这个跟上面data里面的pagesize如果数字不一样,就会显示有冲突
    //这个limit也可以自己设置,依据就是下拉列表中自己设定的值.后面自己加载一下,就可以了
    //可能跟下面这个有关系,自己可以后面测试一下
    limits: [2, 3, 5, 10], // 下拉框中的值，表示每页显示多少条，可以自己选择
    curr: data.pagenum, //当前显示的页码
    groups: 5, // 连续出现的页码个数
    layout: ["count", "limit", "prev", "page", "next", "skip"],
    //自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）
    //没有这个属相,分页什么的都做不出来

    // jump函数，在 laypage.render 调用时就会触发一次，此时first===true
    // jump函数，在点击页码的时候，也会触发，此时 first===undefined
    jump: function (obj, first) {
      //详细信息在 layui官网  jump - 切换分页的回调 有他的详细的用法
      // obj包含了当前分页的所有参数，比如：
      // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
      // console.log(obj.limit); // 得到每页显示的条数
      // console.log(first); // 第一次调用 laypage.render 方法，first===true；切换页码之后，first===undefined
      // 首次不执行  为啥?没想通
      if (!first) {
        //do something
        //这里可以修改ajax 的data参数,就是修改他的请求参数,这样可以实现页面刷新
        data.pagenum = obj.curr;
        data.pagesize = obj.limit;
        renderarticle();
      }
    },
  });
}

//点击获取文章的分类,动态生成分类的字标签
$.ajax({
  url: "/my/article/cates",
  success: function (res) {
    if (res.status === 0) {
      console.log(res);
      //目标值是res.name
      let htmlstr = template("tpl-category", res);
      //注意这里使用过的是append而不是html,因为在这些选择框前面还有一个固定的框是不能变得,不嫩覆盖它,所以要用append追加的办法
      $("select[name=category]").append(htmlstr);
      //更新下拉框
      //在表单是动态创建的时候,渲染会失败,使用这个办法可以成功渲染页面
      //'select'表示重新渲染类型为select的元素,也可以选checkbox radio
      form.render("select");
    }
  },
});


//完成筛选功能
//原理就是收集两个输入框的值,点击只后用他们发送请求,返回的数据铺设到页面上
//接口文档的需求 pagenum pagesize 必选    cate_id  state 可选
//因为是选取后台已有的数据渲染,和第10行要达到的目的一样,可以直接调用这个函数
//再添加一些这次需要的函数就可以了
$('#search').on('click',function(e){
  e.preventDefault();
  //获取所需的这两个值,这个值是动态获取的,每次选取的内容不一样,获取的值就不一样
  let cate_id = $('select[name=category]').val();
  //因为要获取的是cate_id 文章分类的 Id ,所以value属性中需要保存id值
  //选id而不使用分类是因为分类基本每次都会比大家修改,但是前两个id是永远不会改变的
  let state = $('select[name=state]').val();
  //同时改变这些请求的参数
  //这两个都是新添加的请求参数,原来的请求参数,只剩pagesize: 2,
  data.cate_id = cate_id;
  data.state = state;
  // 重置页码为1
  data.pagenum = 1;
  // 重新发送请求获取数据，并渲染
  renderarticle();  
})


//删除,不在html标签内,动态生成的,需要事件委托
$('tbody').on('click','button:contains("删除")',function(){
  let id = $(this).data('id');
  //index是什么意思
  layer.confirm('你确定删除吗？',function(index){
    $.ajax({
      url:'/my/article/delete/' + id,
      success:function(res){
        layer.msg(res.message);
        if (res.status === 0){
          renderarticle();   
        }
      }
    })
    layer.close(index); //ajax请求结束,关闭弹窗 
  })
})